<template>
  <div align="'center">
    
    <h1> 维数公寓-通用管理权限</h1>

  <el-tabs v-model="activeName" @tab-click="handleClick" type="card">
   
   <el-tab-pane label="用户密码登录" name="first">用户密码登录</el-tab-pane>

        <el-form ref="form" :model="form" label-width="80px">
          
          <el-form-item label="用户名">
            <el-input v-model="form.name"></el-input>
          </el-form-item>

        <el-input placeholder="请输入密码" v-model="form.password" show-password></el-input>

        <el-form-item label="验证码">
            <el-col :span="11">
            
              <el-input placeholder="请输入验证码" v-model="form.password"  auto-complete="off" ></el-input>
            
            </el-col>
            <el-col class="line" :span="2">-</el-col>
            <el-col :span="11">
            <img src="http://demo.ruoyi.vip/captcha/captchaImage?type=math&s=0.2661691542964031" alt="">
            </el-col>
          </el-form-item>


          <el-form-item>
            <el-button type="primary" @click="onSubmit()">登录</el-button>
          
          </el-form-item>
        </el-form>


    <el-tab-pane label="手机号码登录" name="second">手机号码登录</el-tab-pane>
    <el-tab-pane label="第3方登录" name="third">第3方登录</el-tab-pane>
  

  </el-tabs>


    

  </div>
</template>

<script>
import axios from 'axios'

export default {
      data() {
      return {
         form: {
          name: 'zhigao',
          password: ''
        },
        activeName: 'first'
      };
    },
    methods: {
      onSubmit(){
      axios.post(this.$baseUrl,this.form)
      .then( res=>{
         if(res.data.flag){
           let userinfo = res.data.data
           window.localStorage.setItem("token" , userinfo.token) ;
           this.$store.commit('setInfo',userinfo)
           this.$router.push("/")
         }
         else
         {
           alert(res.data.msg)
         }
      }

      )

     
      },


      handleClick(tab, event) {
        console.log(tab, event);
      }
    }

}
</script>